<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API示例</title>
    <script src="./js/js11_fetch.js" async></script>
    <link rel="stylesheet" href="./style/common.css">
</head>
<body>
    <h1>fetch()方法示例</h1>
    <p>数据参考网址：jsonplaceholder</p>
    <p class="msg"></p>
    <ul class="posts"></ul>
    <p class="new_post"></p>
    <p><img src="" alt=""></p>
</body>
<script>
    document.addEventListener("DOMContentLoaded",function(){
        let msg=document.querySelector(".msg");
        getPost(1).then(data=>{
            msg.innerHTML+=data.title;
        });
        let posts=document.querySelector(".posts");
        getPosts().then(data=>{
            data.slice(0,10).foreach(o=>{
                const li=document.createElement("li");
                li.textContent=`${o.id}-${o.title}-${o.body}`;
                posts.appendChild(li);
            });
        });

        let newPost=document.querySelector(".new_post");
        createPost({title:"标题",body:"内容",userId:1}).then(data=>{
            newPost.innerHTML+=JSON.stringify(data);
        });
        let img=document.querySelector("p>img");
        const imgUrl="https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M07/06/05/Cg-4y1TcgwGIcCW6ADOtF-oxuF8AAUn6wNDA_AAM60v722.jpg";
        fetchImage(imgUrl).then(blod=>{
            const objectURL=URL.createObjectURL(blod);
            img.src=objectURL;
        }).catch((error)=>{
            console.log(error);
        });
    });
</script>
</html>